<template>
  <div id="app">
    <img
      alt="Vue logo"
      src="./assets/logo.png"
    >
    <!-- 使用vuex -->
    <div class="vuex">
      <ul>
        <li>{{$store.state.count}}</li>
        <li>{{count}}</li>
        <li>{{name}}</li>
        <li>{{obj.a}}</li>
        <li>getters:{{$store.getters.countSub}}</li>
        <li>{{countSub}}</li>
        <!-- 获取vuex模块中定义数据 -->
        <li>{{$store.state.user.name}}</li>
        <li>{{$store.state.user.age}}</li>
        <li>{{ageUser}}</li>
        <li>{{$store.state.setting.title}}</li>
        <!-- 组件自己的计算属性 -->
        <li>{{test}}</li>
      </ul>
      <!-- 修改数据 -->
      <button @click="changeState">修改</button>
    </div>
  </div>
</template>

<script>
// mapState=> 简化从vuex中获取数据
// mapMutations => 简化使用vuex中修改数据的方法
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      ts: 'hi vue component!'
    }
  },
  // computed: {
  //   // 依赖vuex中的数据
  //   count () {
  //     return this.$store.state.count
  //   }
  // },
  // computed: mapState({
  //   // state => 等价于 $store.state
  //   count (state) {
  //     return state.count
  //   },
  //   name (s) {
  //     return s.name
  //   }
  // }),
  // 注意：数组中值要和state中定义的数据属性名一模一样（记住）
  // computed: mapState(['count', 'name']),
  // 组件有自己的计算属性应该怎么写？
  computed: {
    // 组件的计算属性=>依赖组件中data某个数据
    test () {
      return this.ts + '你好！'
    },
    // vuex的计算属性
    //  原理：mapState(['count', 'name'])=》返回计算属性方法对象{count(){},name(){}}
    ...mapState(['count', 'name', 'obj']),
    ...mapGetters(['countSub', 'ageUser'])
  },
  created () {
    console.log('vuex实例：', this.$store)
  },
  methods: {
    // 映射Mutations中的方法给methods
    // mapMutations(['setCount'])=> 返回修改state数据的方法对象=>{setCount(){}}
    ...mapMutations(['setCount', 'user/setAge']),
    // 映射action中的方法给methods
    ...mapActions(['getCounts']),
    // 修改vuex中定义的数据
    changeState () {
      // 不建议这么写
      // this.$store.state.count = Math.random() * 10
      // this.$store.state.obj = { a: 200 }
      // this.$store.state.obj.a = 200
      // console.log(this.$store.state)
      // 使用mutations中提供的方法修改
      // this.$store.commit('setCount', 10)
      // this.setCount(20)
      // 调用actions中方法获取后台API数据
      // this.$store.dispatch('getCounts', 1)
      // this.getCounts(2)
      // 调用模块user中的mutations方法
      this['user/setAge'](10)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
